JavaScript এবং DOM (Document Object Model) এক্সএইচটিএমএল (XHTML) ডকুমেন্টে ইন্টারেকটিভিটি এবং ডাইনামিক কনটেন্ট তৈরি করতে ব্যবহৃত হয়। DOM হল একটি প্রোগ্রামিং ইন্টারফেস যা ব্রাউজারের মধ্যে HTML বা XHTML ডকুমেন্টের কাঠামোকে একটি অবজেক্ট হিসেবে উপস্থাপন করে। JavaScript ব্যবহার করে আমরা DOM এর উপাদানগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারি, যেমন পেজের কন্টেন্ট পরিবর্তন করা, নতুন এলিমেন্ট যোগ করা, বা বিদ্যমান এলিমেন্ট মুছে ফেলা।
১. DOM কি?
১.1 DOM এর সংজ্ঞা
DOM (Document Object Model) একটি প্রোগ্রামিং ইন্টারফেস যা HTML বা XHTML ডকুমেন্টের কাঠামো এবং কন্টেন্টকে একটি গাছের আকারে রূপান্তরিত করে। DOM এর মাধ্যমে ব্রাউজার পেজের সমস্ত উপাদানকে একটি অবজেক্ট হিসেবে দেখতে পারে এবং JavaScript বা অন্যান্য স্ক্রিপ্টিং ভাষা দিয়ে সেগুলির সাথে ইন্টারঅ্যাক্ট করতে পারে।
DOM এর বৈশিষ্ট্য:
- DOM একটি হায়ারার্কিক্যাল স্ট্রাকচার তৈরি করে, যেখানে পেজের এলিমেন্টগুলি (যেমন
<div>,<p>,<a>, ইত্যাদি) একটি গাছের মত রূপে উপস্থাপন করা হয়। - JavaScript দিয়ে DOM এর উপাদানগুলির সাথে ম্যানিপুলেশন করা সম্ভব।
২. JavaScript দিয়ে DOM ম্যানিপুলেশন
JavaScript ব্যবহার করে DOM উপাদানগুলির সাথে ম্যানিপুলেশন করা যায়। DOM ম্যানিপুলেশন এর মাধ্যমে আপনি HTML বা XHTML ডকুমেন্টের কন্টেন্ট পরিবর্তন, এলিমেন্ট যোগ/মুছে ফেলা, স্টাইল পরিবর্তন, বা ইভেন্ট হ্যান্ডলিং করতে পারেন।
২.1 DOM এলিমেন্ট নির্বাচন
DOM এ একটি এলিমেন্ট নির্বাচন করার জন্য JavaScript এর কয়েকটি পদ্ধতি রয়েছে, যেমন getElementById(), getElementsByClassName(), getElementsByTagName(), এবং querySelector()।
২.1.1 getElementById()
এই পদ্ধতিটি নির্দিষ্ট ID সহ একটি এলিমেন্ট নির্বাচন করে।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>DOM Manipulation Example</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button onclick="changeContent()">Change Heading</button>
<script type="text/javascript">
function changeContent() {
var element = document.getElementById("heading");
element.innerHTML = "DOM Manipulated!";
}
</script>
</body>
</html>
ব্যাখ্যা:
getElementById("heading")দিয়েid="heading"সহ এলিমেন্টটি নির্বাচন করা হয়েছে এবং তার কন্টেন্ট পরিবর্তন করা হয়েছে।
২.2 DOM এলিমেন্টের কন্টেন্ট পরিবর্তন
DOM এর মাধ্যমে আপনি এলিমেন্টের কন্টেন্ট পরিবর্তন করতে পারেন, যেমন innerHTML বা textContent ব্যবহার করে।
২.2.1 innerHTML
innerHTML প্রপার্টি দিয়ে এলিমেন্টের HTML কন্টেন্ট পরিবর্তন করা যায়।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Change Content Example</title>
</head>
<body>
<p id="message">This is a paragraph.</p>
<button onclick="updateContent()">Update Paragraph</button>
<script type="text/javascript">
function updateContent() {
var message = document.getElementById("message");
message.innerHTML = "<b>This is an updated paragraph.</b>";
}
</script>
</body>
</html>
ব্যাখ্যা:
message.innerHTML = "<b>This is an updated paragraph.</b>";এখানেinnerHTMLব্যবহার করে প্যারাগ্রাফের কন্টেন্ট পরিবর্তন করা হয়েছে।
২.2.2 textContent
textContent প্রপার্টি শুধুমাত্র টেক্সট কন্টেন্ট পরিবর্তন করতে ব্যবহৃত হয়, HTML ট্যাগের পরিবর্তে স্রেফ টেক্সটকে নিয়ন্ত্রণ করে।
<script type="text/javascript">
function changeTextContent() {
var message = document.getElementById("message");
message.textContent = "This is a new text content!";
}
</script>
৩. DOM এলিমেন্টের স্টাইল পরিবর্তন
JavaScript দিয়ে DOM এলিমেন্টের স্টাইল পরিবর্তন করাও সম্ভব। আপনি style প্রপার্টি ব্যবহার করে স্টাইল কাস্টমাইজ করতে পারেন।
৩.1 style প্রপার্টি ব্যবহার
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>DOM Styling Example</title>
</head>
<body>
<p id="text">This text will change color.</p>
<button onclick="changeColor()">Change Color</button>
<script type="text/javascript">
function changeColor() {
var textElement = document.getElementById("text");
textElement.style.color = "red"; // Changes the text color to red
}
</script>
</body>
</html>
ব্যাখ্যা:
textElement.style.color = "red";এই কোডটিid="text"সহ এলিমেন্টটির টেক্সটের রঙ পরিবর্তন করে।
৪. DOM এলিমেন্ট যোগ করা বা মুছে ফেলা
JavaScript দিয়ে আপনি নতুন এলিমেন্ট যোগ করতে পারেন অথবা বিদ্যমান এলিমেন্ট মুছে ফেলতে পারেন।
৪.1 নতুন এলিমেন্ট যোগ করা
createElement() এবং appendChild() ব্যবহার করে আপনি নতুন এলিমেন্ট তৈরি এবং যুক্ত করতে পারেন।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Add New Element</title>
</head>
<body>
<div id="container"></div>
<button onclick="addElement()">Add Element</button>
<script type="text/javascript">
function addElement() {
var newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph.";
var container = document.getElementById("container");
container.appendChild(newElement);
}
</script>
</body>
</html>
ব্যাখ্যা:
createElement("p")দিয়ে একটি নতুন<p>ট্যাগ তৈরি করা হয়েছে।appendChild()ব্যবহার করে সেই ট্যাগটিcontainerডিভে যোগ করা হয়েছে।
৪.2 এলিমেন্ট মুছে ফেলা
removeChild() ব্যবহার করে একটি এলিমেন্ট মুছে ফেলা যায়।
<script type="text/javascript">
function removeElement() {
var container = document.getElementById("container");
var element = document.getElementById("remove");
container.removeChild(element);
}
</script>
JavaScript দিয়ে DOM ম্যানিপুলেশন এক্সএইচটিএমএল ডকুমেন্টের মধ্যে কন্টেন্ট পরিবর্তন, স্টাইলিং, এবং ইন্টারেকশন তৈরির জন্য অত্যন্ত শক্তিশালী একটি পদ্ধতি। getElementById(), innerHTML, style প্রপার্টি, এবং createElement() মত পদ্ধতিগুলির মাধ্যমে আপনি HTML বা XHTML ডকুমেন্টের উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করতে পারেন এবং ডাইনামিক ওয়েব পেজ তৈরি করতে পারেন।
Read more
